<template>
    <div class="tree-container">
        <el-tree class="tree" :data="data" :props="defaultProps" highlight-current :indent="0"
                        render-after-expand="true" :filter-node-method="filterNode" ref="tree">
                    </el-tree>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            data: [{
                label: '围群系统功能',
                children: [{
                    label: '欢迎页',
                    children: [{
                        label: '登录',
                        children: [{
                            label: '图形验证码拉框',
                        }]
                    }, {
                        label: '注册'
                    }]
                }, {
                    label: '右上角用户信息',
                    children: [{
                        label: '基本信息',
                        children: [{
                            label: '用户信息展示',
                        }, {
                            label: '用户信息修改',
                        }, {
                            label: '点赞数据',
                        }, {
                            label: '收藏数据',
                        }, {
                            label: '最近流浪',
                        }]
                    }, {
                        label: '修改密码',
                    }, {
                        label: '退出登录',
                    }]
                }, {
                    label: '首页',
                    children: [{
                        label: '10年围群资源统计(文章，笔记，项目，源码，总人数，7日内新增人数)'
                    }, {
                        label: '围群数据统计（访客，7日内新增人数，文章数，评论，项目）'
                    }, {
                        label: '给读者的一封信'
                    }]
                },
                {
                    label: '文章管理',
                    children: [{
                        label: '添加文章'
                    }, {
                        label: '文章浏览'
                    }, {
                        label: '文章点赞，收藏，评论'
                    }]
                },
                {
                    label: '笔记管理',
                },
                {
                    label: '关于围群',
                    children: [{
                        label: '系统进度'
                    }, {
                        label: '功能目录'
                    }
                    ]
                }]
            }],
            treeData: [
                {
                    name: '所有分类',
                    children: [
                        {
                            name: '分类1',
                            children: [
                                {
                                    name: '分类1-1',
                                    children: [],
                                },
                            ],
                        },
                    ],
                },
            ],
            // 配置树形图
            defaultProps: {
                children: 'children',
                label: 'label',
            },
        }
    },

    methods: {

    },
}
</script>
<style scoped >
.tree-container {
    width: 300px;
    overflow: auto;
    border: 1px solid #ccc;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.el-tree-node.is-current>.el-tree-node__content {
    background-color: #f1f4f5;
}

.classTitle {
    padding-left: 10px;
    width: 100%;
    height: 42px;
    background-color: #fafafa;
    line-height: 42px;
    font-weight: bold;
}

.el-form .el-form-item {
    margin: 0px 0 !important;
}

.tree-menu {
    width: 200px;
    height: 300px;
    overflow: auto;
}

.tree {
    display: inline-block;
    min-width: 100%;
}

.tree /deep/ .el-tree-node {
    position: relative;
    padding-left: 16px;
}

.tree /deep/ .el-tree-node__children {
    padding-left: 16px;
}

.tree /deep/ .el-tree-node :last-child:before {
    height: 38px;
}

.tree /deep/ .el-tree>.el-tree-node:before {
    border-left: none;
}

.tree-container /deep/ .el-tree>.el-tree-node:after {
    border-top: none;
}

.tree /deep/ .el-tree-node:before {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
}

.tree /deep/ .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
}

.tree /deep/ .el-tree-node__expand-icon.is-leaf {
    display: none;
}

.tree /deep/ .el-tree-node:before {
    border-left: 1px dashed #b8b9bb;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
}

.tree /deep/ .el-tree-node:after {
    border-top: 1px dashed #b8b9bb;
    height: 20px;
    top: 12px;
    width: 24px;
}

.tree /deep/ .el-tree-node__content {
    padding-left: 0 !important;
}

.el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.el-tree .el-icon-caret-right:before {
    /* background: url("../../../../assets/img/plus.png") no-repeat 0; */
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 18px;
}

.el-tree .el-tree-node__expand-icon.expanded .el-icon-caret-right:before {
    /* background: url("../../../../assets/img/minus.png") no-repeat 0 ; */
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 18px;
}
</style>
  
  